<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Arcgis js 测量工具 </title>
    <link rel="stylesheet" href="http://192.168.1.21:8081/arcgis_js_api/library/3.19/3.19/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%;
            width: 100%;
            margin: 0px;
            padding: 0px;
        }

        #measureTools {
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 99;
        }

        #coordinateDiv {
            position: absolute;
            bottom: 10px;
            left: 10px;
            z-index: 99;
            font-size: 25px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <script type="text/javascript">
        var dojoConfig = {
            async: true,
            packages: [{
                "name": "layerjs",
                "location": "/ArcgisMap/static/js/arcgis/measure"
                //"location": location.pathname.replace(/\/[^/]+$/, "")+ "/custom"
            }]
        };
    </script>
    <script type="text/javascript" src="http://192.168.1.21:8081/arcgis_js_api/library/3.19/3.19/init.js"></script>
    <script type="text/javascript">
        require([
            "esri/map",
            "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/geometry/webMercatorUtils",
            "layerjs/MeasureTools",
            "dojo/dom",
            "dojo/domReady!"
        ], function (Map, ArcGISTiledMapServiceLayer, webMercatorUtils, MeasureTools, dom) {


//            var wkId = 4326; //空间参考
            var wkId = 4490; //空间参考
            var spatialReference = new esri.SpatialReference(wkId);
//            var tileLayer = new ArcGISTiledMapServiceLayer("http://cache1.arcgisonline.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer");
            var tileLayer = new ArcGISTiledMapServiceLayer("http://10.254.0.39:6080/arcgis/rest/services/底图服务/BaseMap_SS_EsriColor_L0L10/MapServer");
            var centerPoint = new esri.geometry.Point(118.78881634541742, 32.087441374512395, spatialReference);

            //创建地图
            var map = new Map("map", {
                center: centerPoint,
                zoom: 10
            });
            map.addLayer(tileLayer);

            var measureTool = new MeasureTools({
                map: map
            }, "measureTools");

            map.on("click", mapClick);

            //地图点击事件
            function mapClick(evt) {
//               var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
                var mp = evt.mapPoint;
                dom.byId('coordinateDiv').innerHTML = mp.x + ',' + mp.y;
            }
        });
    </script>
</head>

<body>
<div id="map">
    <div id="measureTools">
        <button class="measure-distance">距离</button>
        <button class="measure-area">面积</button>
    </div>
    <div id="coordinateDiv"></div>
</div>
</body>
</html>
